<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">	
	<link rel="stylesheet" href="css/swiper.min.css">
	<style>
		html,body{
            position:relative;
            height:100%;
        }
		body{
            margin:0;
            padding:0;
        }
        .swiper-container{
        	width: 100%;
        	height: 100%;
        	margin-left: auto;
        	margin-right: auto;
        }
        .swiper-slide{
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		/* 视差效果 */
		.parallax-bg{
			background-image: url(images/ad-01.jpg);
			position: absolute;
			left: 0;
			top: 0;
			width: 130%;
			height: 100%;
			background-position: center;
			background-size: cover;
		}
		/* 自定义导航圆点的样式 */
		.swiper-pagination-bullet{
			width: 20px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			font-size: 12px;
			color: #000;
			background-color: #999;
			opacity: 1;
		}
		/* 轮播图当前所在页的导航的圆点的样式 */
		.swiper-pagination-bullet-active{
			color: #fff;
			background-color: #07f;
		}
	</style>
</head>
<body>
	<div class="swiper-container">
		<div class="parallax-bg" data-swiper-parallax="-23%" ></div> 
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div data-swiper-parallax="-100">第1页</div>
			</div>
			<div class="swiper-slide">
				<div data-swiper-parallax="-100">第2页</div>
			</div>
			<div class="swiper-slide">
				<div data-swiper-parallax="-100">第3页</div>
			</div>
			<div class="swiper-slide">第4页</div>
			<div class="swiper-slide">第5页</div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>

	<script src="js/swiper.min.js"></script>
	<script>
		var swiper=new Swiper(".swiper-container",{
			pagination:".swiper-pagination", 
			paginationClickable:true,
			spaceBetween:20, 
			nextButton:".swiper-button-next",
			prevButton:".swiper-button-prev",

			//视差效果
			parallax: true, //开启视差效果
   			speed: 600, //滑块自动滑动时的持续时间
			
			// paginationType:"fraction", //分式导航
			// paginationType:"progress",   //进度条导航
			// paginationType:"custom",
			
       		paginationBulletRender:function(swiper,index,className){
       			return "<span class='"+className+"'>"+(index+1)+"</span>";
       		}

		});
	</script>	
</body>
</html>